<template>
  <div ref="dom" style="background: white;padding: 5px" class="uni-scroll">
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-button
          v-if="!zooMax"
          type="warning"
          icon="el-icon-full-screen"
          @click="requestFullScreen"
        />
        <el-button
          v-else
          type="warning"
          icon="el-icon-crop"
          @click="exitFullscreen"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="deviceList.length < 2"
          type="primary"
          @click="comparison()"
        >{{ $t('comparison') }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="deviceList.length < 2"
          type="primary"
          @click="commonSetting()"
        >{{ $t('setting') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="5">
      <el-col v-for="(item,index) in deviceList" :key="index" :span="zooMax ? 12 : 24">
        <div style="height: 45px;display: flex;justify-content: space-between;background: #03c2c2;border-radius:5px;align-items: center;padding: 0 10px">
          <span style="color: white">{{ item.deviceName }}</span>
          <el-button-group style="margin-top: 3px">
            <el-button icon="el-icon-menu" @click.stop="deviceMore(item)" />
            <el-button icon="el-icon-setting" @click.stop="deviceSetting(item)" />
            <el-button icon="el-icon-delete" @click.stop="del(item)" />
          </el-button-group>
        </div>
        <device-sensor
          :show-hidden="showHidden"
          :device="item"
        />
      </el-col>
    </el-row>

    <el-dialog
      :visible.sync="showSetting"
      :title="device.deviceName"
      width="1200px"
      top="15px"
    >
      <device-setting
        :device-core="device.deviceCore"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="dialogCommonSettingVisible"
      destroy-on-close
      width="1400px"
      top="15px"
    >
      <device-list-setting
        :device-core-list="chooseDeviceCoreList"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="dialogAnalysisVisible"
      top="15px"
      width="90%"
    >
      <device-sensor-analysis v-if="dialogAnalysisVisible" :device-core-list="chooseDeviceCoreList" />
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  exitFullscreen,
  formatDeviceStatus, requestFullScreen
} from '@/util/common'
import DeviceSensor from './DeviceSensor'
import DeviceSetting from '@/components/DeviceSetting'
import DeviceListSetting from '@/components/DeviceListSetting'
import DeviceSensorAnalysis from '@/components/DeviceSensorAnalysis'
export default {
  name: 'Monitor',
  components: {
    DeviceSensor,
    DeviceSetting,
    DeviceListSetting,
    DeviceSensorAnalysis
  },
  data() {
    return {
      showSetting: false,
      device: {},
      zooMax: false,
      dialogCommonSettingVisible: false,
      dialogAnalysisVisible: false,
      chooseDeviceCoreList: []
    }
  },
  computed: {
    ...mapGetters(['deviceList'])
  },
  props: {
    showHidden: {
      type: String,
      default: '0'
    }
  },
  created() {
  },
  methods: {
    commonSetting() {
      const chooseDeviceCoreList = []
      this.deviceList.forEach(device => {
        chooseDeviceCoreList.push(device.deviceCore)
      })
      this.chooseDeviceCoreList = chooseDeviceCoreList
      this.dialogCommonSettingVisible = true
    },
    comparison() {
      const chooseDeviceCoreList = []
      this.deviceList.forEach(device => {
        chooseDeviceCoreList.push(device.deviceCore)
      })
      this.chooseDeviceCoreList = chooseDeviceCoreList
      this.dialogAnalysisVisible = true
    },
    requestFullScreen() {
      requestFullScreen(this.$refs.dom)
      this.zooMax = true
    },
    exitFullscreen() {
      exitFullscreen()
      this.zooMax = false
    },
    formatDeviceStatus(item) {
      return formatDeviceStatus(this, item.status)
    },
    del(item) {
      for (let i = 0; i < this.deviceList.length; i++) {
        if (this.deviceList[i].deviceCore === item.deviceCore) {
          this.deviceList.splice(i, 1)
        }
      }
    },
    deviceMore(item) {
      this.device = item
      this.$router.push({
        path: '/device/manage/' + this.device.deviceCore,
        query: {
          deviceCore: this.device.deviceCore,
          deviceName: this.device.deviceName
        }
      })
    },
    deviceSetting(item) {
      this.device = item
      this.showSetting = true
    }
  }
}
</script>

